<template>
  <div>
    <div class="btnbox">
      <div class="backbtn" @click="backlink()">
        <van-icon name="arrow-left" class="svgicon" />
      </div>
      <div style="display: flex; align-items: center">
        <div class="share">
          <icon-svg
            icon-class="share"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
        <div class="share" v-if="!iscollect" @click="setmycollect">
          <icon-svg
            icon-class="club_collect_white"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
        <div class="share" v-if="iscollect" @click="setmycollect">
          <icon-svg
            icon-class="club_collect_yellow"
            icon-color="#304056"
            class="share-icon"
          ></icon-svg>
        </div>
      </div>
    </div>
    <van-swipe :autoplay="3000" lazy-render class="swipebox">
      <van-swipe-item v-for="image in clubinfo.storecover_image" :key="image">
        <img src="" class="swipeimg" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <el-card class="clubcard" :body-style="{ padding: '10px' }">
      <div class="namebox">
        <div class="store_name">{{ clubinfo.store_name }}</div>
        <div class="store_score">评分：4.2</div>
      </div>
      <div class="timebox">
        <div class="store_opentime">营业时间|{{ clubinfo.business_hours }}</div>
        <div class="store_phone">
          <van-icon name="phone" class="phoneicon" />
          <div class="dianhua">电话</div>
        </div>
      </div>
      <div class="addressbox">
        <div class="address">地址：{{ clubinfo.address }}</div>
        <div class="store_position">
          <van-icon name="location" class="locationicon" />
          <div class="dizhi">地址</div>
        </div>
      </div>
      <!-- :content="'俱乐部简介：' + clubinfo.store_describe" -->
      <div class="tagbox">
        <van-text-ellipsis
          rows="1"
          class="describe"
          :content="'俱乐部简介：' + clubinfo.store_describe"
          expand-text="展开"
          collapse-text="收起"
        />
        <div>
          <van-tag round type="success" class="statustag">营业中</van-tag>
        </div>
      </div>
    </el-card>
    <div class="zhujiaobox">
      <div style="height: 25px; display: flex; justify-content: space-between">
        <div style="font-size: 20px; line-height: 25px">助教</div>
        <div
          style="font-size: 15px; line-height: 25px; color: rgb(96, 96, 96)"
          @click="gotozhujiaolist('ZhujiaoListPage')"
        >
          更多<van-icon name="arrow" />
        </div>
      </div>
      <div style="display: flex">
        <div
          class="zhujiaocard"
          v-for="(item, index) in zhujiaolist"
          :key="index"
          @click="zhujiaodetail(item)"
        >
          <div class="image-container">
            <img class="zhujiaoimg" v-lazy="item.photo" alt="" />
          </div>
          <div class="zhujiaoinfo">
            <div class="zhujiaonickname">昵称：{{ item.nickname }}</div>
            <div class="levelbox">
              <div class="zhujiaolevel">{{ item.level }}</div>
              <div class="zhujiaoaixin">
                <van-icon name="like-o" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tablebox">
      <div style="height: 25px">
        <div style="font-size: 20px; line-height: 25px">球桌</div>
      </div>
      <el-card class="tablecard" :body-style="{ padding: '5px' }">
        <van-tabs v-model:active="activeName" @click-tab="onClickTab">
          <van-tab
            v-for="(item, index) in tablist"
            :key="index"
            :title="item.title"
            :name="item.activeName"
          >
            <div v-if="activeName === item.activeName">
              <div
                v-if="
                  item.dataname === 'zhongbatable' && zhongbatable.length > 0
                "
                class="activetab"
              >
                <!-- 这里渲染 zhongbatable 的数据 -->
                <div
                  v-for="(zhongbadata, zhongbaid) in zhongbatable"
                  :key="zhongbaid"
                  class="table"
                >
                  <div class="tablenumber">
                    {{ zhongbadata.table_number }}号桌
                  </div>
                  <div class="yuyuebtnbox">
                    <div class="tablestatus">空闲</div>
                    <div style="display: flex; margin-right: 10px">
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableReserve', zhongbadata)"
                      >
                        点击预约/
                      </div>
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableOpen', zhongbadata)"
                      >
                        开台
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="
                  item.dataname === 'zhongbatable' && zhongbatable.length == 0
                "
                class="activemsg"
              >
                <div class="tishimsg">暂无空闲球桌</div>
              </div>
              <div
                v-else-if="
                  item.dataname === 'sinuoketable' && sinuoketable.length > 0
                "
                class="activetab"
              >
                <!-- 这里渲染 sinuoketable 的数据 -->
                <div
                  v-for="(sinuokedata, sinuokeid) in sinuoketable"
                  :key="sinuokeid"
                  class="table"
                >
                  <div class="tablenumber">
                    {{ sinuokedata.table_number }}号桌
                  </div>
                  <div class="yuyuebtnbox">
                    <div class="tablestatus">空闲</div>
                    <div style="display: flex; margin-right: 10px">
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableReserve', sinuokedata)"
                      >
                        点击预约/
                      </div>
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableOpen', sinuokedata)"
                      >
                        开台
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="
                  item.dataname === 'sinuoketable' && sinuoketable.length == 0
                "
                class="activemsg"
              >
                <div class="tishimsg">暂无空闲球桌</div>
              </div>
              <div
                v-else-if="
                  item.dataname === 'baojiantable' && baojiantable.length > 0
                "
                class="activetab"
              >
                <!-- 这里渲染 baojiantable 的数据 -->
                <div
                  v-for="(baojiandata, baojianid) in baojiantable"
                  :key="baojianid"
                  class="table"
                >
                  <div class="tablenumber">
                    {{ baojiandata.table_number }}号桌
                  </div>
                  <div class="yuyuebtnbox">
                    <div class="tablestatus">空闲</div>
                    <div style="display: flex; margin-right: 10px">
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableReserve', baojiandata)"
                      >
                        点击预约/
                      </div>
                      <div
                        class="yuyuebtn"
                        @click="gotolinkwithdata('TableOpen', baojiandata)"
                      >
                        开台
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                v-if="
                  item.dataname === 'baojiantable' && baojiantable.length == 0
                "
                class="activemsg"
              >
                <div class="tishimsg">暂无空闲球桌</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  gettableinfo,
  getzhujiaoinfo,
  setfavstore,
  getfavstore,
} from "@/http/request.js";
import { useStore } from "@/store/index.js";
import { showToast } from "vant";
export default {
  data() {
    return {
      formdata: {
        store_id: "",
        start_time: "",
        end_time: "",
        t_id: "",
        t_number: "",
        user_id: "",
        t_grade: "",
        city: "",
      },
      iscollect: false,
      clubinfo: {},
      tablist: [
        { title: "中八", activeName: "zhongba", dataname: "zhongbatable" },
        { title: "包间", activeName: "baojian", dataname: "baojiantable" },
        { title: "斯诺克", activeName: "sinuoke", dataname: "sinuoketable" },
      ],
      zhongbatable: [],
      sinuoketable: [],
      baojiantable: [],
      activeName: "zhongba",
      zhujiaolist: [],
    };
  },
  methods: {
    gotolink(path) {
      this.$router.push(path);
    },
    gotolinkwithdata(name, data) { //预约开台
      const mergedObj = { ...this.clubinfo, ...data };
      this.$router.push({
        name: name,
        params: {
          clubinfo: JSON.stringify(mergedObj),
        },
      });
    },
    gotozhujiaolist(name) {
      this.$router.push({
        name: name,
        params: {
          clubinfo: JSON.stringify(this.clubinfo),
        },
      });
    },
    zhujiaodetail(item) {
      this.$router.push({
        name: "ZhujiaoDetail",
        params: {
          zhujiaoinfo: JSON.stringify(item),
        },
      });
    },
    setmycollect() {
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      const data = {
        user_id: userinfo.id,
        store_id: this.clubinfo.store_id,
        city: this.clubinfo.city,
        is_collect: this.iscollect,
      };
      setfavstore(data).then((res) => {
        showToast(res.msg);
        this.iscollect = !this.iscollect;
      });
    },
    jsontoArr(data) {
      const datainfo = Object.keys(data).map((table_id) => ({
        table_id: parseInt(table_id),
        ...data[table_id],
      }));
      return datainfo;
    },
    initTable(id) {
      this.zhongbatable = [];
      this.sinuoketable = [];
      this.baojiantable = [];
      this.zhujiaolist = [];
      gettableinfo({ store_id: id }).then((res) => {
        if (res.data != null) {
          res.data = this.jsontoArr(res.data);
          for (var i = 0; i < res.data.length; i++) {
            if (res.data[i].grade == 1) {
              this.zhongbatable.push(res.data[i]);
            } else if (res.data[i].grade == 2) {
              this.baojiantable.push(res.data[i]);
            } else if (res.data[i].grade == 3) {
              this.sinuoketable.push(res.data[i]);
            }
          }
        }
      });
      getzhujiaoinfo({ store_id: id }).then((res) => {
        if (res.data != null) {
          const datainfo = Object.keys(res.data.zhujiao_info).map(
            (zhujiao_id) => ({
              zhujiao_id: parseInt(zhujiao_id),
              ...res.data.zhujiao_info[zhujiao_id],
            })
          );
          for (var i = 0; i < 3; i++) {
            if (datainfo[i].zhujiao_grade == "1") {
              datainfo[i].level = "高级助教";
            } else if (datainfo[i].zhujiao_grade == "2") {
              datainfo[i].level = "中级助教";
            } else if (datainfo[i].zhujiao_grade == "3") {
              datainfo[i].level = "初级助教";
            }
            this.zhujiaolist.push(datainfo[i]);
          }
        }
      });
      const store = useStore();
      const userinfo = store.getUserStoreinfo;
      getfavstore({ user_id: userinfo.id }).then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          if (id == res.data[i].store_id) {
            this.iscollect = true;
          }
        }
      });
    },

    onClickTab(value) {
      this.activeName = value.name;
    },
    backlink() {
      this.$router.back();
    },
  },
  created() {
    this.clubinfo = JSON.parse(this.$route.params.clubinfo);
    this.initTable(this.clubinfo.store_id);
  },
};
</script>

<style scoped>
.btnbox {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2; /* 将 z-index 调整为 2，确保在上面一层 */
  position: relative; /* 添加 position: relative，以便子元素使用 z-index */
}
.backbtn {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  padding: 5px;
  margin-left: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
  border-radius: 50%;
}
.share {
  width: 28px;
  height: 28px;
  background-color: #837e7da1;
  margin-left: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.svgicon {
  font-size: 30px;
  color: white;
}
.share-icon {
  width: 25px;
  height: 25px;
}
.swipebox {
  margin-top: -60px;
  z-index: 1 !important; /* 将 z-index 调整为 1，确保在下面一层 */
}

.swipeimg {
  width: 100%;
  height: 300px;
  position: relative; /* 添加 position: relative，以便使用 z-index */
}
.clubcard {
  width: 90%;
  margin: -60px auto 0 auto;
  min-height: 100px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.clubcard .namebox {
  display: flex;
  justify-content: space-between;
  margin: 5px auto;
  width: 95%;
  height: 25px;
}
.namebox .store_name {
  color: black;
  font-size: 22px;
  font-weight: 550;
  line-height: 25px;
}
.namebox .store_score {
  color: rgb(81, 81, 81);
  font-size: 14px;
  line-height: 25px;
}
.clubcard .timebox {
  display: flex;
  justify-content: space-between;
  margin: 3px auto;
  width: 95%;
  height: 25px;
}
.timebox .store_opentime {
  color: black;
  font-size: 17px;
  line-height: 25px;
}
.timebox .store_phone {
  display: flex;
  min-width: 60px;
}
.store_phone .dianhua {
  color: rgb(81, 81, 81);
  line-height: 25px;
  font-size: 16px;
}
.store_phone .phoneicon {
  font-size: 24px;
  color: #6096fd;
  line-height: 25px;
}
.addressbox .store_position {
  display: flex;
  min-width: 60px;
}
.store_position .dizhi {
  color: rgb(81, 81, 81);
  line-height: 25px;
  font-size: 16px;
}
.store_position .locationicon {
  font-size: 24px;
  color: #6096fd;
  line-height: 25px;
}
.clubcard .addressbox {
  display: flex;
  justify-content: space-between;
  margin: 3px auto;
  width: 95%;
}
.addressbox .address {
  color: rgb(81, 81, 81);
  font-size: 17px;
  line-height: 25px;
}
.addressbox .position {
  color: rgb(81, 81, 81);
  font-size: 17px;
  line-height: 25px;
}
.tagbox {
  display: flex;
  justify-content: space-between;
  margin: 3px auto;
  width: 95%;
}
.tagbox .describe {
  font-size: 16px;
  width: 95%;
}
.tagbox span {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tagbox .statustag {
  min-width: 50px;
  height: 25px;
}
.tablebox {
  width: 90%;
  margin: 10px auto;
  min-height: 400px;
}
.tablecard {
  width: 100%;
  min-height: 400px;
  margin: 5px auto;
  border-radius: 15px;
}
.activetab {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0 auto;
}
.zhujiaobox {
  width: 90%;
  min-height: 200px;
  margin: 10px auto;
}
.zhujiaocard {
  position: relative;
  width: calc(33.33% - 10px); /* 为边距留出空间 */
  margin: 5px;
  border-radius: 10px;
  overflow: hidden; /* 确保图片圆角与卡片相匹配 */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8); /* 水平偏移，垂直偏移，模糊距离，颜色 */
}
.image-container {
  width: 100%;
  height: 150px; /* 设置容器高度为 100px */
  overflow: hidden; /* 超出容器的部分隐藏 */
  border-top-left-radius: 10px; /* 容器左上角圆角 */
  border-top-right-radius: 10px; /* 容器右上角圆角 */
}

.zhujiaoimg {
  width: 100%; /* 图片宽度填满容器 */
  height: auto; /* 高度自适应，保持宽高比 */
  display: block;
}
.zhujiaoinfo {
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 92%;
  background-color: rgba(59, 59, 59, 0.6); /* 半透明遮罩层 */
  color: white; /* 文本颜色 */
  border: 1px solid white;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex;
}
.zhujiaonickname {
  line-height: 18px;
  font-size: 14px;
  margin: 5px 0 0 10px;
}
.levelbox {
  display: flex;
  justify-content: space-between;
  margin: 0 0 5px 10px;
}
.zhujiaolevel {
  line-height: 18px;
  font-size: 14px;
}
.zhujiaoaixin {
  line-height: 18px;
  font-size: 18px;
  margin-right: 5px;
}
.activemsg {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.tishimsg {
  font-size: 20px;
}
.activetab .table {
  flex-basis: calc(50% - 10px); /* 每行两个元素，减去间距 */
  margin: 5px; /* 设置间距 */
  background-image: url("../../assets/icons/homepage/tablebg.svg");
  background-position: center;
  background-size: contain; /* 使用 contain 以保持图片比例，不超出容器 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  width: 100%;
  height: 95px;
  position: relative;
}
.table .tablenumber {
  font-size: 20px;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.table .yuyuebtnbox {
  width: 100%;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: space-between;
}
.table .tablestatus {
  font-size: 14px;
  margin-left: 10px;
  font-weight: 540;
  color: green;
}
.table .yuyuebtn {
  font-size: 13px;
}
</style>